<!-- 递归 家族节点 -->
<template>
  <div class="node-ul-parent">
    <div class="node-li" v-for="(item, index) in dataList" :key="index">
      <div class="node-border"></div>
      <div class="node-Name flex">
        <div class="icon" @click="changeState(item)">
          {{ item.childList.length > 0 ? "+" : "-" }}
        </div>

        <div class="flex">
          <div v-for="(v, i) in item.value" :key="i" class="c1 flex">
            <img
              :src="config.serverImg + v.img"
              @click="
                pickImg.acData = item;
                pickImg.show = true;
                acIndex = i;
              "
            />
            <div>
              <div class="c2 flex c6">
                <div>{{ v.name }}</div>
                <div>{{ year - time(Number(v.start_time), "yyyy") }}周岁</div>
                <div>
                  生肖：属{{
                    ssArr[(time(Number(v.start_time), "yyyy") - 1900) % 12]
                  }}
                </div>
              </div>
              <div class="flex c2">
                {{ v.start_type }}
                <span v-if="v.start_time">{{
                  time(Number(v.start_time), "yyyy/mm/dd")
                }}</span>
                <span v-else>暂无记录</span>

                <div v-if="v.end_time != 0">
                  ~{{ v.end_type }}{{ time(Number(v.end_time), "yyyy/mm/dd") }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="c4">
          <div>{{ num }}</div>
          <div>代</div>
        </div>
        <div class="c5 flex">
          ID:{{ item.id }}
          <span @click="addNode(item)">新增</span>
          <span v-if="item.copy_id" @click="syncData(item)">同步</span>

          <el-popover
            v-model:visible="showCopy"
            placement="left"
            :width="160"
            v-else
          >
            <el-input
              type="text"
              v-model="copyForm.uid"
              placeholder="uid"
            ></el-input>
            <el-input
              type="text"
              v-model="copyForm.pid"
              placeholder="pid"
            ></el-input>
            <el-input
              type="text"
              v-model="copyForm.sort"
              placeholder="sort"
            ></el-input>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="showCopy = false"
                >取消</el-button
              >
              <el-button type="primary" size="mini" @click="copyData(item)"
                >确定</el-button
              >
            </div>
            <template #reference>
              <span @click="showCopy = true">复制</span>
            </template>
          </el-popover>

          <span @click.stop="selectNodeEdit(item)">编辑</span>

          <!-- <span @click.stop="saveData(item)">保存</span> -->
          <el-popover
            v-model:visible="delObj.show"
            placement="left"
            :width="160"
          >
            <p>确定删除?</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="delObj.show = false"
                >取消</el-button
              >
              <el-button type="primary" size="mini" @click="delData(item)"
                >确定</el-button
              >
            </div>
            <template #reference>
              <span @click="delObj.show = true">删除</span>
            </template>
          </el-popover>
        </div>
      </div>
      <div class="node-ul">
        <tree-node
          :dataList="item.childList"
          v-if="item.childList.length > 0 && item.isShow"
          :num="num + 1"
          @loadData="loadData"
          @selectNodeEdit="selectNodeEdit"
        >
        </tree-node>
      </div>
    </div>
  </div>
</template>

<script setup>
import treeNode from "@/components/tree-node.vue";
import config from "@/common/config.js";

import time from "@/utils/timeFormat.js";

import publicJS from "@/hook/public.js";
const { ElMessage, api } = publicJS();

const emit = defineEmits(["select"]);
const props = defineProps({
  dataList: {
    type: Array,
    default: [],
  },
  num: {
    type: Number,
    default: 1,
  },
});
console.log(props);
const ssArr = [
  "鼠",
  "牛",
  "虎",
  "兔",
  "龙",
  "蛇",
  "马",
  "羊",
  "猴",
  "鸡",
  "狗",
  "猪",
];

const year = new Date().getFullYear();

const changeState = (e) => {
  console.log(e);
  e.isShow = !e.isShow;
};

const saveData = (v) => {
  delete v.childList;
  api.post("api/family/edit_data", v).then((r) => {
    ElMessage.success("保存成功");
  });
};

const pickImg = reactive({
  show: false,
  name: "123",
  acData: null,
});

//选择图片
const selectImg = (name) => {
  pickImg.show = true;
  pickImg.name = name;
};

//确定图片
const acIndex = ref(0);
const imgSuccess = (res) => {
  pickImg.show = false;
  console.log(pickImg.acData.value);
  if (res) pickImg.acData.value[acIndex.value].img = res.value;
};

const delObj = reactive({
  show: false,
});
const delData = (v) => {
  // showDel.value = false;
  api
    .post("api/family/del_data", {
      id: v.id,
    })
    .then((r) => {
      ElMessage.success({
        message: "删除成功",
      });
      emit("loadData", v);
    });
};

//同步内容
const copyForm = reactive({
  pid: "",
  sort: "1",
  uid: "",
});
const copyData = (v) => {
  api
    .post("a/family/copy_data", {
      ...copyForm,
      value: v.value,
      copy_id: v.id,
    })
    .then((r) => {
      ElMessage.success({
        message: "复制成功",
      });
    });
};

//新增节点
const addNode = (v) => {
  console.log(v);
  api
    .post("api/family/add_one_node", {
      member_id: 2,
      ...v,
    })
    .then((r) => {
      ElMessage.success({
        message: "新增成功",
      });
      emit("loadData", v);
    });
};

//同步内容
const syncData = (v) => {
  api.post("a/family/sync_data", v).then((r) => {
    ElMessage.success({
      message: "同步成功",
      onClose: () => {
        location.reload();
      },
    });
  });
};

//递归 向上返回事件
const loadData = (v) => {
  emit("loadData", v);
};
const selectNodeEdit = (v) => {
  emit("selectNodeEdit", v);
};
//递归 向上返回事件
</script>

<style lang="scss" scoped>
.c1 {
  margin: 0 15px;
}
.c1 img {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  display: block;
  margin-right: 5px;
}
.c2 {
  font-size: 13px;
  color: #666;
  line-height: 20px;
}
.c2 .el-input {
  width: 100px;
}
.c2 span {
  display: inline-block;
  margin-left: 5px;
}
.c3 {
  font-size: 12px;
  color: #888;
  line-height: 15px;
  margin-top: 3px;
}
.c4 {
  position: absolute;
  background: #fff;
  right: -7px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  text-align: center;
  font-size: 14px;
  color: #666;
  line-height: 15px;
}
.c5 {
  position: absolute;
  right: -200px;
  font-size: 14px;
  color: #555;
}
.c5 span {
  display: inline-block;
  margin-left: 10px;
}
.c5 span:hover {
  color: var(--el-color-primary);
  cursor: pointer;
}
.c6 > div {
  margin-right: 8px;
  color: #555;
}
.node-ul-parent {
  margin: 0;
  padding: 0 0 0 20px;
}
.node-ul {
  margin: 0;
  padding: 0 0 0 30px;
}

.node-ul .node-li,
.node-ul-parent .node-li {
  list-style: none;
  position: relative;
}

.node-ul .node-li:before {
  position: absolute;
  content: "";
  top: 25px;
  left: -30px;
  width: 30px;
  height: 1px;
  border-bottom: 1px solid #666;
}

.node-ul .node-li:not(:last-child)::after {
  position: absolute;
  content: "";
  top: -9px;
  left: -30px;
  bottom: -36px;
  border-left: 1px solid #666;
}
.node-ul .node-li:first-child .node-border {
  position: relative;
}
.node-ul .node-li:first-child .node-border::after {
  position: absolute;
  content: "";
  height: 36px;
  top: -9px;
  left: -30px;
  bottom: 0px;
  border-left: 1px solid #666;
}

.node-Name {
  background: #fff;
  position: relative;
  width: 570px;
  padding: 10px 30px 10px 10px;
  line-height: 20px;
  padding-left: 7px;
  border: 1px solid #ccc;
  margin: 10px 0;
  border-radius: 7px;
  .icon {
    padding: 0 3px 0 0;
    font-size: 24px;
    cursor: pointer;
  }
}
</style>
